import TodoList from "./Todo/TodoList";
import TodoItem from "./Todo/TodoItem";
import CodeMirror from './CodeMirror/Code'
import {ImageElement} from './Image';
import Table from './Table/Table'
import TableRow from './Table/TableRow'
import TableCell from './Table/TableCell'


export const Element = (props) => {
  const {attributes, children, element} = props;
  switch (element.type) {
    case 'todo-list':
      return <TodoList {...props} />;
    case 'image':
      return <ImageElement {...props} />;
    case 'hr':
      return <hr {...attributes} contentEditable={false} style={{margin: '20px 0'}}/>;
    case 'todo-item':
      return <TodoItem {...props} />;
    case 'block-quote':
      return <blockquote {...attributes}>{children}</blockquote>;
    case 'div':
      return <div {...attributes} type={element.type}>{children}</div>;
    case 'root':
      return <div {...attributes} type={element.type}>{children}</div>;
    case 'bulleted-list':
      return <ul {...attributes}>{children}</ul>;
    case 'heading-one':
      return <h1 data-slate-type={'heading'} {...attributes}>{children}</h1>;
    case 'heading-two':
      return <h2 data-slate-type={'heading'} {...attributes}>{children}</h2>;
    case 'heading-three':
      return <h3 data-slate-type={'heading'} {...attributes}>{children}</h3>;
    case 'heading-four':
      return <h4 {...attributes}>{children}</h4>;
    case 'heading-five':
      return <h5 {...attributes}>{children}</h5>;
    case 'heading-six':
      return <h6 {...attributes}>{children}</h6>;
    case 'list-item':
      return <li {...attributes}>{children}</li>;
    case 'ol':
      return <ol {...attributes} start={1}>{children}</ol>;
    case 'ol-item':
      return <li {...attributes}>{children}</li>;
    case 'code':
      return <CodeMirror className={"code"} {...attributes}>{children}</CodeMirror>;
    case 'span':
      return <span {...attributes}>{children}</span>;
    case 'paragraph':
      return <p {...attributes}>{children}</p>;
    case 'bold':
      return <strong {...attributes}>{children}</strong>;
    case 'br':
      return <br {...attributes} type={element.type}/>;
    case 'italic':
      return <span {...attributes} type={element.type} className={"italic"}>{children}</span>;
    case 'line-through':
      return <span {...attributes} type={element.type} className={"line-through"}>{children}</span>;
    case 'table':
      return <Table {...attributes}>{children}</Table>
    case 'table-row':
      return <TableRow {...attributes}>{children}</TableRow>
    case 'table-cell':
      return <TableCell {...attributes}>{children}</TableCell>
      default:
      return <span {...attributes} type={element.type}>{children}</span>
  }
};
